<!-- 用户列表 -->
<template>
    <div class="page-box h100 display-flex czbj">
        <div>
            <dxtable :headBtn="headBtn" :dataJson="dataJson" :portUrl="portUrl" :qx="qx" ref="databale" :czFun="czFun"
                czWidth="300">
            </dxtable>
        </div>
        <n-modal v-model:show="showModal" preset="card" class="Stock-diagnosis">
            <template #header>
                <div>消费记录</div>
            </template>
            <div>
                <xiaofeijl :uid="uid"></xiaofeijl>
            </div>
            <template #action>
                <div class="tr">
                    <n-button @click="showModal = false"> 关闭 </n-button>
                </div>
            </template>
        </n-modal>

        <n-modal v-model:show="showModaler" preset="card" class="Stock-diagnosis">
            <template #header>
                <div>聊天记录</div>
            </template>
            <div class=" display-flex btm ">
                <div class="kkmkxrtxert">
                    <div class="rilist display-flex pd pt10 pm10" v-for="(item, idx) in ridsr" :key="idx"
                        @click="getLtjls(item)">
                        <img class=" dsftwsertwe cz" :src="item.headPortrait" />
                        <div class="ml10 flex-1">
                            <p class="dian fz16 b">{{ item.name }}</p>
                            <p class="fz12 z9 dianer dsfdstrxettse">
                                <span>{{ item.synopsis }}
                                </span>
                            </p>
                        </div>
                    </div>

                </div>
                <div class=" flex-1 pl10 pt10 kjjmkxertwer ">
                    <div class="sdfsdtywr" ref="chatContext">
                        <template v-for="(item, idx) in charList" :key="idx">
                            <!-- tr tl -->
                            <div class="pd pt5 pm5 display-flex" :class="item.type == '2' ? 'tl' : 'tr'">
                                <img v-if="item.type == 1" :src="userImg" class="kkmmdfttxer mr10" />
                                <img v-if="item.type == 2" :src="rfm" class="kkmmdfttxer mr10" />
                                <div class="itemchartext  pr">
                                    <div v-html="item.content" class="lkkmxerthtml"></div>
                                    <span class="jiantouxe"></span>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
            </div>
        </n-modal>
    </div>
</template>
<script lang='ts' setup>
import { rowDark } from "naive-ui/es/legacy-grid/styles";
import dxtable from "../../components/util/dxtable.vue";
import xiaofeijl from "./xiaofeijl.vue";
import sort from "../../components/util/sort.vue";
import { dxget, dxpost, qurl, hf } from "../../util/index";
import { NButton } from "naive-ui";
import { h, ref, reactive, nextTick } from "vue";
import { isSlotEmpty } from "naive-ui/es/_utils";
const props = defineProps({
    pup: { type: String },
});
const uid = ref()
const showModaler = ref(false)
let headBtn = [];
const zdList = ref()
const databale = ref();
const showModal = ref(false)
const ridsr = ref([])
const charList = ref([])
const userImg = ref()
const rfm = ref()
const chatContext = ref()
const initeer = () => {
    databale.value.initDataExpose();
};
const emit = defineEmits(["callBack"]);
// 弹窗公用该列表
let dataJson = reactive([
    {
        title: "用户头像",
        key: "headimgurl",
        width: 100,
        render(row) {
            return h("img", { src: row.headimgurl, class: "usjjkertwre" })
        }
    },
    {
        title: "用户昵称",
        key: "nickname",
        search: true, // 是否在搜索栏展示
        width: 200
    },
    {
        title: "openid",
        key: "openid",
        width: 250
    },
    {
        title: "性别",
        key: "sex",
        render(row) {
            return h("span", {}, row.sex == 0 ? '男' : '女')
        }
    },
    {
        title: "手机号码",
        key: "phone",
    },
    {
        title: "登录城市",
        key: "city",
    }, {
        title: "会员到期日",
        key: "dqsj",
        render(row) {
            return h("span", {}, row.dqsj || '--')
        }
    },
]);
let portUrl = "chatgpt/wxcharUser_gpt";
const qx = {
    DeletePermissionID: "chatGPTusersListdel", //删除
    EditPermissionIdentifier: "chatGPTusersListbja", // 编辑
    NewPermissionIdentifier: "chatGPTusersListxza", // 新建
    ViewPermissionID: "chatGPTusersListck", // 查看
};

const getRidList = async (uid) => {
    const { data }: any = await dxget("chatgpt/api/getltjqr", {
        uid
    })
    ridsr.value = data
}
const getLtjls = async (item) => {
    rfm.value = item.headPortrait
    const { data }: any = await dxget("chatgpt/api/getjilu", {
        uid:uid.value,
        rid: item.id
    })
    charList.value = data

    nextTick(() => {
        chatContext.value.scrollTo({
            top: 9999,
            behavior: "smooth"
        });
    })
}


const czFun = {
    fun: (row, loading) => {
        return [
            h(
                NButton,
                {
                    type: "info",
                    quaternary: true,
                    onClick: async (e) => {
                        uid.value = row.id
                        showModal.value = true
                    },
                },
                "消费记录"
            ), h(
                NButton,
                {
                    type: "info",
                    quaternary: true,
                    onClick: async (e) => {
                        charList.value = []
                        uid.value = row.id
                        userImg.value = row.headimgurl
                        await getRidList(row.id)
                        showModaler.value = true
                    },
                },
                "聊天记录"
            ),

        ];
    },
};

</script>
<style scoped>
.kkmkxrtxert {

    width: 200px;
    border-right: 1px solid #e0e0e0;
    background: #f8f8f8;
}

.dsftwsertwe {
    width: 50px;
    height: 50px;
    border-radius: 4px;
}

.dsfdstrxettse {
    line-height: 1.2;
    height: 30px;
}

.rilist:hover {
    cursor: pointer;
    background: #e0e0e0;
}

.kjjmkxertwer {
    overflow: auto;
}



.itemchartext {
    font-size: 13px;
    padding: 8px;
    border-radius: 4px;
    background: linear-gradient(to bottom, #00e47f, #01d9d5);
    display: inline-block;
    color: #fff;
}

.jiantouxe {
    position: absolute;
    top: 8px;
    border: 6px solid transparent;
    content: " ";
    right: 100%;
    display: inline-block;
    border-left-color: #00e47f;
    border-left-width: 4px;
    margin-left: 0;
    left: 100%;


}

.sdfsdtywr {
    overflow: auto;
    background: #fff;
    height: 600px;

}

.sdfsdtywr .tl .itemchartext {
    background: #29283a;
}

.sdfsdtywr .tl .jiantouxe {
    left: initial;
    border-left-width: 0px;
    border-right-color: #29283a;
    border-right-width: 4px;
}

.sdfsdtywr .tr {
    flex-direction: row-reverse;


    justify-content: right;




}

.sdfsdtywr .tr .kkmmdfttxer {
    margin-right: 0;
    margin-left: 10px !important;
}

.cosloertt {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 20px;
}

.lokkxsetrtw .itemchartext {
    padding-right: 60px !important;
}

.kkmmxerwer {
    height: 50px;
    position: absolute;
    top: -10px;
}

.laiettxert {
    position: absolute;
    right: 10px;
    top: 10px;
}

.itemchartext.ak {
    background: #29283a !important;
    color: #fff;
}

.dfdstytewrr {
    color: #00e47f !important;
}

.tesherr {

    /* position: absolute; */
}

.kkmmdfttxer {
    width: 40px;
    height: 40px;
    border-radius: 4px;
}
</style>
  
  